
@font-face {
  font-family:YaHei;
  src: url('font/微软雅黑.ttf');
}
@font-face {
  font-family:myFirstFont;
  src: url('font/Sansation-Light.ttf');
}
@font-face {
  font-family:YouYuan;
  src: url('font/幼圆.ttf');
}

.solarsys{
  width: 800px;
  height: 600px;
  position: relative;
  margin: auto;
  padding: 0;
  transform: scale(1);
}

/*太阳*/
.sun {
  left:357px;
  top:357px;
  height: 90px;
  width: 90px;
  background-color: rgb(248,107,35);
  border-radius: 50%;
  box-shadow: 5px 5px 10px rgb(248,107,35), -5px -5px 10px rgb(248,107,35), 5px -5px 10px rgb(248,107,35), -5px 5px 10px rgb(248,107,35);
  position: absolute;
  margin: 0;
}

/*水星*/
.mercury {
  left:337.5px;
  top:395px;
  height: 10px;
  width: 10px;
  background-color: rgb(166,138,56);
  border-radius: 50%;
  position: absolute;
  transform-origin: 62.5px 5px;
  animation: rotate 1.5s infinite linear;
}

/*水星轨道*/

/*金星*/
.venus {
  left:309px;
  top:389px;
  height: 22px;
  width: 22px;
  background-color: rgb(246,157,97);
  border-radius: 50%;
  position: absolute;
  transform-origin: 91px 11px;
  animation: rotate 3.84s infinite linear;
}


/*地球*/
.earth {
  left:266.5px;
  top:391px;
  height: 18px;
  width: 18px;
  background-color: rgb(114, 152, 174);
  border-radius: 50%;
  position: absolute;
  transform-origin: 134px 9px;
  animation: rotate 6.25s infinite linear;
}

/*地球轨道*/

/*火星*/
.mars {
  left:222.5px;
  top:392.5px;
  height: 15px;
  width: 15px;
  background-color: rgb(140,119,63);
  border-radius: 50%;
  position: absolute;
  transform-origin: 177.5px 7.5px;
  animation: rotate 11.75s infinite linear;
}

/*火星轨道*/

/*木星*/
.jupiter {
  left:134px;
  top:379px;
  height: 42px;
  width: 42px;
  background-color: rgb(156,164,143);
  border-radius: 50%;
  position: absolute;
  transform-origin: 266px 21px;
  animation: rotate 74.04s infinite linear;
}

/*木星轨道*/

/*土星*/
.saturn {
  left:92px;
  top:387px;
  height: 26px;
  width: 26px;
  background-color: rgb(215,171,68);
  border-radius: 50%;
  position: absolute;
  transform-origin: 308px 13px;
  animation: rotate 183.92s infinite linear;
}

/*土星轨道*/

/*天王星*/
.uranus {
  left:41.5px;
  top:386.5px;
  height: 27px;
  width: 27px;
  background-color: rgb(164,192,206);
  border-radius: 50%;
  position: absolute;
  transform-origin: 358.5px 13.5px;
  animation: rotate 524.46s infinite linear;
}

/*天王星轨道*/

/*海王星*/
.neptune {
  left:10px;
  top:390px;
  height: 20px;
  width: 20px;
  background-color: rgb(133,136,180);
  border-radius: 50%;
  position: absolute;
  transform-origin: 390px 10px;
  animation: rotate 1028.76s infinite linear;
}

/*海王星轨道*/

@keyframes rotate {
  100% {
    transform: rotate(-360deg);
  }
}

.nav{

        
  position:fixed; /* 绝对定位，fixed是相对于浏览器窗口定位。 */
  top:0; /* 距离窗口顶部距离 */
  left:0; /* 距离窗口左边的距离 */
  width:100%;  /* 高度 */
        height: 80px;
  z-index:99; /* 层叠顺序，数值越大就越高。页面滚动的时候就不会被其他内容所遮挡。 */
        background: #272727;
        
        box-shadow: rgba(0,0,0,0.1) 0px 5px 20px;
}

   

    #navleft{
        color:#ffffff;
        font-family:myFirstFont;
        font-size: 35px;
        padding-left: 10px;
        line-height :80px;
        text-decoration: none;
    }
    .navrightindex{
      outline: none;
        background: #272727;
            display: inline-block;
        color:#ffffff;
        text-decoration: none;
        border: 5px solid #272727;
        margin: auto;
        font-size: 25px;
            font-family:YaHei;
            text-decoration: none;
            -webkit-transition-duration: 0.3s; /* Safari */
            transition-duration: 0.3s;
            padding: 20px 100px 20px 20px;
            border-radius: 20px 0px 0px 25px;
            margin-right: 0px;
            transition: padding-right 0.5s;
            text-align: right;
            cursor: default;
    }
    .navright{
        outline: none;
        background: #272727;
            display: inline-block;
        color:#ffffff;
        text-decoration: none;
        border: 5px solid #272727;
        margin: auto;
        font-size: 25px;
            font-family:YaHei;
            text-decoration: none;
            -webkit-transition-duration: 0.3s; /* Safari */
            transition-duration: 0.3s;
            padding: 20px 20px 20px 20px;
            border-radius: 20px 0px 0px 25px;
            margin-right: 0px;
            transition: padding-right 0.5s;
            text-align: right;
            cursor: pointer;
    }
    .navright:hover{
        padding-right: 100px;
    }
    .navright:active{
        padding-right:100px;
        color:#ffffff;
                background: #272727;
    }
    .topul{position:fixed; /* 绝对定位，fixed是相对于浏览器窗口定位。 */
  top:80px; /* 距离窗口顶部距离 */
  right:0;  /* 高度 */
  z-index:99;
    }
    #mainname
    { 
        padding-top: 250px;
        font-family: myFirstFont;
        font-size: 70px;
        text-align: center;
    }
    #remain{
      font-family: myFirstFont;
      font-size: 40px;
      text-align: center;
  }
  #remain2{
    font-family: YouYuan;
    font-size: 25px;
    text-align: center;
}
#remain3{
  font-family: myFirstFont;
  font-size: 28px;
  text-align: center;
}
    #aftsys{

    }
